import React, { Component } from "react";
import "./Cate.less";
import { Tabs, NavBar, Icon } from "antd-mobile";
import Carde from "../Index/compones/Carde/Carde";
import { reqCateGoodsList, reqCatesList } from "../../http/api";
export default class Cate extends Component {
  constructor() {
    super();
    this.state = {
      cater: [],
      goods: [],
    };
  }
  componentDidMount() {
    reqCatesList().then((res) => {
      if (res.data.code === 200) {
        this.setState({
          ...this.state,
          cater: res.data.list,
        });
        reqCateGoodsList({ fid: res.data.list[0].id }).then((res) => {
          if (res.data.code === 200) {
            this.setState({
              ...this.state,
              goods: res.data.list,
            });
          }
        });
      }
    });
  }
  reqgoods(fid) {
    reqCateGoodsList({ fid }).then((res) => {
      if (res.data.code === 200) {
        this.setState({
          ...this.state,
          goods: res.data.list,
        });
      }
    });
  }

  render() {
    let { cater, goods } = this.state;
    let tab = cater.map((item) => {
      return {
        title: item.catename,
        key: item.id,
      };
    });
    console.log(tab);
    return (
      <div className="Cate">
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => {
            this.props.history.go(-1);
          }}
        >
          分类页
        </NavBar>
        <Tabs
          onChange={(title, key) => {
            this.reqgoods(tab[key].key);
          }}
          tabs={tab}
          initialPage={0}
          activeTab={false}
          tabBarPosition="left"
          tabDirection="vertical"
        >
          <div>
            {goods
              ? goods.map((item, index) => {
                  return (
                    <Carde key={index} list={item} {...this.props}></Carde>
                  );
                })
              : null}
          </div>
        </Tabs>
      </div>
    );
  }
}
